<!-- 登录弹窗模板 -->
<div class="modal fade" id="loginModal" tabindex="-1" aria-labelledby="loginModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content login-modal-content">
            <div class="modal-header border-0 pb-0">
                <h5 class="modal-title login-title" id="loginModalLabel">
                    <i class="fas fa-sign-in-alt me-2"></i>登录到 VisoonSpace
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body pt-2">
                <form id="loginForm" class="login-form">
                    {% csrf_token %}
                    <div class="mb-3">
                        <label for="username" class="form-label">
                            <i class="fas fa-user me-1"></i>用户名
                        </label>
                        <input type="text" class="form-control login-input" id="username" name="username" 
                               placeholder="请输入用户名" required autocomplete="username">
                    </div>
                    <div class="mb-3">
                        <label for="password" class="form-label">
                            <i class="fas fa-lock me-1"></i>密码
                        </label>
                        <div class="input-group">
                            <input type="password" class="form-control login-input" id="password" name="password" 
                                   placeholder="请输入密码" required autocomplete="current-password">
                            <button class="btn btn-outline-secondary toggle-password" type="button" id="togglePassword">
                                <i class="fas fa-eye"></i>
                            </button>
                        </div>
                    </div>
                    <div class="mb-3 form-check">
                        <input type="checkbox" class="form-check-input" id="rememberMe" name="remember_me">
                        <label class="form-check-label" for="rememberMe">
                            记住我
                        </label>
                    </div>
                    <div class="alert alert-danger d-none" id="loginError" role="alert">
                        <i class="fas fa-exclamation-triangle me-1"></i>
                        <span id="loginErrorMessage"></span>
                    </div>
                    <div class="d-grid">
                        <button type="submit" class="btn btn-primary login-btn" id="loginSubmitBtn">
                            <i class="fas fa-sign-in-alt me-1"></i>
                            <span class="btn-text">登录</span>
                            <span class="spinner-border spinner-border-sm d-none" role="status" aria-hidden="true"></span>
                        </button>
                    </div>
                </form>
            </div>
            <div class="modal-footer border-0 pt-0">
                <div class="text-center w-100">
                    <small class="text-muted">
                        <i class="fas fa-info-circle me-1"></i>
                        登录后可以发布文章和添加工具
                    </small>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
/* 登录弹窗样式 */
.login-modal-content {
    border: none;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}

.login-title {
    font-weight: 600;
    color: white;
}

.login-form {
    background: rgba(255, 255, 255, 0.95);
    padding: 2rem;
    border-radius: 12px;
    color: #333;
}

.login-input {
    border: 2px solid #e9ecef;
    border-radius: 8px;
    padding: 12px 16px;
    font-size: 14px;
    transition: all 0.3s ease;
}

.login-input:focus {
    border-color: #667eea;
    box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25);
}

.login-btn {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: none;
    border-radius: 8px;
    padding: 12px;
    font-weight: 500;
    font-size: 16px;
    transition: all 0.3s ease;
}

.login-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
}

.login-btn:disabled {
    opacity: 0.7;
    transform: none;
}

.toggle-password {
    border-left: none;
    border-color: #e9ecef;
}

.form-label {
    font-weight: 500;
    color: #495057;
    margin-bottom: 8px;
}

.form-check-label {
    color: #6c757d;
}

.btn-close {
    filter: invert(1);
}

.modal-footer small {
    color: rgba(255, 255, 255, 0.8) !important;
}

/* 响应式设计 */
@media (max-width: 576px) {
    .login-form {
        padding: 1.5rem;
    }
    
    .modal-dialog {
        margin: 1rem;
    }
}
</style>